import React, { useState, useEffect } from 'react';
import { Card, Button, Row, Col, Spin, message, Typography, Tag } from 'antd';
import { ShoppingCartOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';

const { Title, Paragraph } = Typography;

const ProductDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟加载商品详情
    setLoading(true);
    setTimeout(() => {
      setProduct({
        id: id,
        name: `测试商品 ${id}`,
        price: 99.99,
        description: '这是一个详细的商品描述，包含了商品的各种特性和功能介绍。',
        category: '电子产品',
        imageUrl: '/api/placeholder/400/300',
        viewCount: 123
      });
      setLoading(false);
    }, 1000);
  }, [id]);

  const handleAddToCart = () => {
    message.success(`${product.name} 已加入购物车`);
  };

  const handleGoBack = () => {
    navigate('/client/search');
  };

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!product) {
    return (
      <div style={{ textAlign: 'center', padding: '48px' }}>
        <Title level={3}>商品不存在</Title>
        <Button type="primary" onClick={handleGoBack}>
          返回搜索
        </Button>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px' }}>
      <Button 
        icon={<ArrowLeftOutlined />} 
        onClick={handleGoBack}
        style={{ marginBottom: '24px' }}
      >
        返回搜索
      </Button>
      
      <Row gutter={[24, 24]}>
        <Col xs={24} md={12}>
          <Card
            cover={
              <img
                alt={product.name}
                src={product.imageUrl}
                style={{ width: '100%', height: '400px', objectFit: 'cover' }}
                onError={(e) => {
                  e.target.src = '/api/placeholder/400/300';
                }}
              />
            }
          />
        </Col>
        
        <Col xs={24} md={12}>
          <div style={{ padding: '24px' }}>
            <Title level={2}>{product.name}</Title>
            
            <div style={{ marginBottom: '16px' }}>
              <Tag color="blue">{product.category}</Tag>
              <span style={{ marginLeft: '8px', color: '#666' }}>浏览量: {product.viewCount}</span>
            </div>
            
            <div style={{ marginBottom: '24px' }}>
              <Title level={3} style={{ color: '#ff4d4f', margin: 0 }}>
                ¥{product.price}
              </Title>
            </div>
            
            <Paragraph style={{ fontSize: '16px', lineHeight: '1.6' }}>
              {product.description}
            </Paragraph>
            
            <div style={{ marginTop: '32px' }}>
              <Button 
                type="primary" 
                size="large"
                icon={<ShoppingCartOutlined />}
                onClick={handleAddToCart}
                style={{ width: '200px' }}
              >
                加入购物车
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default ProductDetail;